<h3 mat-dialog-title>
  当前挂单
</h3>

<mat-dialog-content>

  <table mat-table class="full-width" matSort matSortActive="createTs" matSortDirection="desc" [trackBy]="trackBy">

    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef>#</th>
      <td mat-cell *matCellDef="let row; let index=index">
        {{index + 1}}
      </td>
    </ng-container>

    <ng-container matColumnDef="ex">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>交易所</th>
      <td mat-cell *matCellDef="let row">{{row.ex}}</td>
    </ng-container>

    <ng-container matColumnDef="baseCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>基础币种</th>
      <td class="ccy-logo-code" mat-cell *matCellDef="let row">
        <img class="ccy-logo" [src]="CoinLogoPath(row.baseCcy)" alt="">
        <div class="ccy-code">{{row.baseCcy}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="quoteCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>报价币种</th>
      <td class="ccy-logo-code" mat-cell *matCellDef="let row">
        <img class="ccy-logo" [src]="CoinLogoPath(row.quoteCcy)" alt="">
        <div class="ccy-code">{{row.quoteCcy}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="side">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>方向</th>
      <td mat-cell *matCellDef="let row"
          [class.order-side-buy]="row.side==='buy'"
          [class.order-side-sell]="row.side==='sell'">
        {{row.side}}
      </td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>类型</th>
      <td mat-cell *matCellDef="let row">{{row.type}}</td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>状态</th>
      <td mat-cell *matCellDef="let row">{{row.status}}</td>
    </ng-container>

    <ng-container matColumnDef="askPrice">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>下单价格</th>
      <td mat-cell *matCellDef="let row">
        {{row.askPrice}}
      </td>
    </ng-container>

    <ng-container matColumnDef="askQty">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>下单数量</th>
      <td mat-cell *matCellDef="let row">
        {{row.askQty}}
      </td>
    </ng-container>

    <ng-container matColumnDef="createTs">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>下单时间</th>
      <td mat-cell *matCellDef="let row">
        {{row.createTs | date:'MM-dd HH:mm:ss'}}
      </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row" align="end">

        <button mat-button [matMenuTriggerFor]="actions">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #actions="matMenu">
          <button mat-menu-item (click)="showOrderDetail(row)">
            <mat-icon>details</mat-icon>
            详情
          </button>
          <button mat-menu-item (click)="cancelOrder(row)" [disabled]="processes['cancel-'+row.orderId]">
            <mat-icon>block</mat-icon>
            取消订单
          </button>
          <button mat-menu-item (click)="cancelAndOpenForm(row)" [disabled]="processes['cancel-'+row.orderId]">
            <mat-icon>block</mat-icon>
            取消并重新下单
          </button>
        </mat-menu>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

</mat-dialog-content>

<div mat-dialog-actions align="end">
  <button mat-button (click)="closeDialog()">关闭</button>
</div>
